<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="140px">
			<el-form-item label="用户手机号码:" prop="userName">
				<el-input v-model.trim="queryParams.userName" clearable placeholder="请输入用户手机号码" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<l-search @search="handleQuery" @refresh="resetQuery" />
			</el-form-item>
		</el-form>


		<el-table v-loading="loading" :data="list" stripe @selection-change="handleSelectionChange">
			<el-table-column align="center" label="序号" type="index" width="55" />
			<el-table-column align="center" label="IP" prop="ipaddr" />
			<el-table-column align="center" label="用户手机号码" prop="userName" />
			<el-table-column align="center" label="客服名称" prop="userName" />
			<el-table-column align="center" label="创建时间" prop="loginTime" />
			<LTableColumn type="options" :width="tableAction">
				<template slot-scope="{ row }">
					<el-button type="danger" @click="handleDelete(row)">移除</el-button>
				</template>
			</LTableColumn>
		</el-table>
	</l-page>
</template>

<script>
import { cleanLogininfor, delLogininfor, exportLogininfor, list } from '@/api/monitor/logininfor';
import startEndTime from '@/components/StartEndTime';
import tableMixins from '@/mixins/table';
export default {
	name: 'Footslogging',
	components: { startEndTime },
	mixins: [tableMixins],
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 状态数据字典
			statusOptions: [],
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				userName: undefined,
				status: undefined,
			},
		};
	},
	created() {
		this.getList();
		this.getDicts('sys_common_status').then((response) => {
			this.statusOptions = response.data;
		});
	},
	methods: {
		/** 查询登录日志列表 */
		getList() {
			this.loading = true;
			list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
				this.list = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 登录状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status);
		},
		//获取时间
		getTime(startTime, endTime) {
			this.$set(this.dateRange, 0, startTime);
			this.$set(this.dateRange, 1, endTime);
		},

		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = [];
			this.$refs.child.resetTime(); //清空时间
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.infoId);
			this.multiple = !selection.length;
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const infoIds = row.infoId || this.ids;
			this.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delLogininfor(infoIds);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 清空按钮操作 */
		handleClean() {
			this.$confirm('是否确认清空所有登录日志数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return cleanLogininfor();
				})
				.then(() => {
					this.getList();
					this.msgSuccess('清空成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有操作日志数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportLogininfor(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
